import React from 'react';
import { Box, Flex, Text, Tooltip } from '@chakra-ui/react';
import { FaTrophy, FaMedal, FaStar } from 'react-icons/fa';
import { Badge } from '../../types';

interface BadgeDisplayProps {
  badges: Badge[];
}

const BadgeDisplay: React.FC<BadgeDisplayProps> = ({ badges }) => {
  const getBadgeIcon = (type: Badge['type']) => {
    switch (type) {
      case 'trophy':
        return <FaTrophy />;
      case 'medal':
        return <FaMedal />;
      case 'star':
        return <FaStar />;
      default:
        return <FaStar />;
    }
  };

  const getBadgeColor = (rarity: Badge['rarity']) => {
    switch (rarity) {
      case 'common':
        return 'gray.300';
      case 'rare':
        return 'blue.300';
      case 'epic':
        return 'purple.300';
      case 'legendary':
        return 'yellow.300';
      default:
        return 'gray.300';
    }
  };

  return (
    <Flex wrap="wrap" gap={4}>
      {badges.map((badge, index) => (
        <Tooltip key={index} label={badge.description} placement="top">
          <Box textAlign="center">
            <Box
              as="span"
              display="inline-flex"
              alignItems="center"
              justifyContent="center"
              fontSize="2xl"
              color={getBadgeColor(badge.rarity)}
            >
              {getBadgeIcon(badge.type)}
            </Box>
            <Text fontSize="sm" mt={1}>
              {badge.name}
            </Text>
          </Box>
        </Tooltip>
      ))}
    </Flex>
  );
};

export default BadgeDisplay;
